//搜索结果，带分页
<template>
  <div class="box">
    <el-card
      class="box-card"
      v-for="(plant, index) in records"
      :key="index"
      @click="xiangxi2(plant.id)"
    >
      <div class="div1" @click="xiangxi2(plant.id)">
        <h4 class="p1" v-html="plant.chineseName"></h4>
        <img :src="plant.img1" />
      </div>
      <div class="div2" @click="xiangxi2(plant.id)">
        <p class="pp" v-if="plant.classes" v-html="plant.classes"></p>
        <p class="pp" v-if="plant.englishName" v-html="plant.englishName"></p>
        <p class="pp" v-if="plant.synonym" v-html="plant.synonym"></p>
        <p class="pp" v-if="plant.synopsis" v-html="plant.synopsis"></p>
        <p class="pp" v-if="plant.symptom" v-html="plant.symptom"></p>
        <p class="pp" v-if="plant.pathogen" v-html="plant.pathogen"></p>
        <p
          class="pp"
          v-if="plant.infectionCycle"
          v-html="plant.infectionCycle"
        ></p>
        <p
          class="pp"
          v-if="plant.occurrenceFactor"
          v-html="plant.occurrenceFactor"
        ></p>
        <p
          class="pp"
          v-if="plant.preventionMethod"
          v-html="plant.preventionMethod"
        ></p>
        <!-- <p class="pp" v-else>暂无其他内容</p> -->
      </div>
    </el-card>

    <br />
    <div class="footer" v-if="total">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 15]"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-empty :image-size="200" v-if="!total"></el-empty>
  </div>
</template>
<script>
import { search } from "@/api";
export default {
  data() {
    return {
      records: [],
      total: 0,
      pageSize: 5,
      currentPage: 1,
    };
  },
  mounted() {
    this.init();
  },
  computed: {
    plant() {
      //  计算属性，搜索的字符串
      return this.$route.query.context;
    },
  },
  watch: {
    //监听plant
    plant(newData, oldData) {
      console.log("oldData==" + oldData);
      console.log("newData==" + newData);
      this.currentPage = 1; //页码归一
      this.init(); //   诺方式变化，则调用该方法
    },
  },
  methods: {
    async init() {
      //进行搜索
      let data = {};
      if (this.plant != null || this.plant != "") {
        await search(this.plant, this.currentPage, this.pageSize).then(
          (res) => {
            data = JSON.parse(JSON.stringify(res.data)).data;
          }
        );
      }
      // console.log("data===" + JSON.stringify(data));
      this.records = data.content;
      this.total = data.totalElements;
      this.pageSize = data.size;
      this.currentPage = data.number + 1;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.init();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.init();
    },
    xiangxi2(id) {
      //页面跳转，并携带参数，搜索的字符串，用于搜索病害详情
      this.$router.push({
        path: "/xiangxi2",
        query: {
          context: id,
        },
      });
    },
  },
};
</script>
<style scoped>
.box-card {
  height: 160px;
  margin: 15px auto;
}
img {
  width: 100px;
  height: 100px;
  float: left;
}
.div1 {
  margin-top: -20px;
  float: left;
}
.div2 {
  float: left;
  margin-left: 60px;
}
.pp {
  width: 750px;
  line-height: 35px;
  margin: 0 auto;
  text-overflow: ellipsis; /* 溢出显示省略号 */
  overflow: hidden; /* 溢出隐藏 */
  white-space: nowrap; /* 强制不换行 */
}
.pp:hover {
  text-decoration: underline;
}

.p1 {
  margin-bottom: 5px;
}
.p1:hover {
  text-decoration: underline;
}
.box {
  width: 1000px;
  height: 1360px;
  background-color: rgb(255, 255, 255);
  margin-top: 10px;
  margin: auto;
}
.footer {
  margin-left: 200px;
}
</style>
